<template>
  <el-menu
    default-active="1"
    class="el-menu-demo"
    mode="horizontal"
    active-text-color="#F25454"
    :style="'left:' + number + 'px'"
  >
    <template v-for="menu in navTree">
      <el-submenu
        v-if="menu.children && menu.children.length >= 1"
        :index="'' + menu.id"
        :id="'li' + menu.number"
        class="menuLi"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.name }}</span>
        </template>
        <template v-for="menu01 in menu.children">
          <el-submenu
            v-if="menu01.children &&menu01.children.length >= 1"
            :index="'' +menu01.id"
            :id="'li' +menu01.number"
          >
            <template slot="title">
              <i :class="menu01.icon"></i>
              <span slot="title">{{ menu01.name }}</span>
            </template>

            <template v-for="menu02 in menu01.children">
              <el-submenu
                v-if="menu02.children &&menu02.children.length >= 1"
                :index="'' +menu02.id"
                :id="'li' +menu02.number"
              >
                <template slot="title">
                  <i :class="menu02.icon"></i>
                  <span slot="title">{{menu02.name }}</span>
                </template>
                <template v-for="menu03 in menu02.children">
                  <el-submenu
                    v-if="menu03.children &&menu03.children.length >= 1"
                    :index="'' +menu03.id"
                    :id="'li' +menu03.number"
                    class="b11111111111111"
                  >
                    <template slot="title">
                      <i :class="menu03.icon"></i>
                      <span slot="title">{{menu03.name }}</span>
                    </template>
                  </el-submenu>
                  <el-menu-item v-else :index="'' +menu03.id" @click="handleRoute(menu03)">
                    <i :class="menu03.icon"></i>
                    <span slot="title">{{menu03.name }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item v-else :index="'' +menu02.id" @click="handleRoute(menu02)">
                <i :class="menu02.icon"></i>
                <span slot="title">{{menu02.name }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="'' +menu01.id" @click="handleRoute(menu01)">
            <i :class="menu01.icon"></i>
            <span slot="title">{{ menu01.name }}</span>
          </el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item v-else :index="'' + menu.id" @click="handleRoute(menu)">
        <i :class="menu.icon"></i>
        <span slot="title">{{ menu.name }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
import { getIFrameUrl, getIFramePath } from "@/utils/iframe";
export default {
  name: "MenuTree",
  props: ["number"],
  methods: {
    handleRoute(menu) {
      // 如果是嵌套页面，转换成iframe的path
      let path = getIFramePath(menu.url);
      if (!path) {
        path = menu.url;
      }
      // 通过菜单URL跳转至指定路由
      this.$router.push("/" + path);
    }
  },
  computed: {
    ...mapState({
      navTree: state => state.menu.navTree
    })
  }
};
</script>

<style lang="scss">
// .el-submenu, .el-menu-item {
//   background-color: #3c4b5a44;
// }

.el-menu--horizontal > .el-submenu .el-submenu__title {
  font-size: 16px;
  color: #fff !important;
}
.el-menu--horizontal .el-submenu.menuLi .el-submenu__title i {
  color: #fff;
}
.el-menu--horizontal > .el-submenu:focus /deep/ .el-submenu__title,
.el-menu--horizontal > .el-submenu:hover /deep/ .el-submenu__title {
  // background: #166d7b;
  background: #4e738d !important;
}
.el-menu--horizontal .el-menu .childMenu .el-submenu__title i {
  color: #909399 !important;
}
</style>
